import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createContainer } from 'utils/hoc'
import ContentBox from 'components/contentBox'
import RelatedCom from './com/relatedCom'
import QRCode from 'qrcode.react'
import PropTypes from 'prop-types'

import Style from './edit.css'
import { Button, message, Modal } from 'antd'

class edit extends Component {
  static propTypes = {
    match: PropTypes.object,
    getSceneDetail: PropTypes.func,
    details: PropTypes.object,
    editRequest: PropTypes.any,
    editScene: PropTypes.func,
    goodsData: PropTypes.any,
    getGoodsList: PropTypes.func,
    restGoods: PropTypes.func,
    editDetails: PropTypes.func
  }
  constructor (props) {
    super(props)
    this.state = {}
    this.handleOk = this.handleOk.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.getGoods = this.getGoods.bind(this)
    this.editDetails = this.editDetails.bind(this)
    this.handleCancel = this.handleCancel.bind(this)
    this.showPreview = this.showPreview.bind(this)
  }

  // 添加热区
  handleOk (value) {
    this.setState({
      width: value.width,
      height: value.height,
      addTagNodes: value.addTagNodes
    })
    this.props.restGoods()
  }

  handleCancel () {
    window.location.reload()
  }

  editDetails (addTagNodes) {
    this.setState({
      addTagNodes
    })
  }

  getGoods (params) {
    this.props.getGoodsList(params)
  }

  componentDidMount () {
    const { id } = this.props.match.params
    this.id = id
    this.setState({
      sceneId: id
    })
    this.props.getSceneDetail({
      sceneId: id
    })
  }

  componentWillReceiveProps (nextProps) {
    if (!this.props.editRequest && nextProps.editRequest) {
      message.success('编辑成功')
      // setTimeout(() => {
      //   window.location.href = '/scenes/list'
      // }, 800)
    }
  }

  showPreview () {
    this.setState({
      showPreview: true
    })
  }

  handleSubmit () {
    const { details } = this.props
    const { width, height, addTagNodes } = this.state
    if (!this.submiting) {
      this.submiting = true
      this.props.editScene({
        sceneId: this.id,
        width,
        height,
        addTagNodes: addTagNodes || details.tagNodeList,
        authorId: details.authorId,
        name: details.name,
        categoryCode: details.categoryCode,
        image: details.image
      })
      setTimeout(() => {
        this.submiting = false
      }, 1000)
    }
  }

  render () {
    const { showPreview, sceneId } = this.state
    const { details, goodsData } = this.props
    return (
      <>
        <ContentBox>
          <div className={Style['scenes-edit']}>
            <div className={Style['title']}>场景修改</div>
            {
              details && <RelatedCom details={details} image={details && details.image} handleOk={this.handleOk} getGoods={this.getGoods} goodsList={goodsData && goodsData.list} editDetails={this.editDetails} />
            }
            <div className={Style['btn-container']}>
              <Button type='primary' onClick={this.handleSubmit}>完成提交</Button>
              <Button className={Style['button']} style={{ marginRight: '20px', marginLeft: '20px' }} onClick={this.showPreview}>生成预览</Button>
              <Button onClick={this.handleCancel}>取消</Button>
            </div>
            <Modal title='预览' visible={showPreview} footer={null} onCancel={() => {
              this.setState({
                showPreview: false
              })
            }}>
              <div style={{ display: 'flex', justifyContent: 'center' }}>
                <QRCode value={`de-scene-${sceneId}`} />
              </div>
            </Modal>
          </div>
        </ContentBox>
      </>
    )
  }
}

const mapState = state => ({
  details: state.scene.details,
  editRequest: state.scene.editRequest,
  goodsData: state.goods.goodsData
})
const mapDispatch = dispatch => ({
  getSceneDetail: dispatch.scene.getSceneDetail,
  editScene: dispatch.scene.editScene,
  getGoodsList: dispatch.goods.getGoodsList,
  restGoods: dispatch.goods.restGoods
})

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )(edit)
)
